{extend name="./public/base" /}
{block name="title"}个人资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.back{
		float: left;
	    margin-top: 14px;
	    padding-left: 10px;
	}
	
	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	    margin-top: -20px;
	}
	
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	}
	.info_list{
		width: 90%;
	}
	.my_info{
		width: 110%;
		padding-bottom: 30px;
	}
	.my_info .item span{
		width: 48%;
        padding-left: 30px;
	}
	
	.my_info .item .tab{
		width: 60px;
	    height: 60px;
	    padding-left: 330px;
	    position: relative;
	    top: 20px;
	}

	.my_info .item img{
		width: 100%;
		height: 100%;
	}

	.info_list .item span{
	 	display: inline-block;
	}
	.weui-switch-cp__box:before, .weui-switch:before {
	    content: " ";
	    position: absolute;
	    top: 2px;
	    left: -4px;
	    width: 50px;
	    height: 30px;
	    border-radius: 15px;
	    background-color: #fdfdfd;
	    -webkit-transition: -webkit-transform .35s cubic-bezier(.45,1,.4,1);
	    transition: -webkit-transform .35s cubic-bezier(.45,1,.4,1);
	    transition: transform .35s cubic-bezier(.45,1,.4,1);
	    transition: transform .35s cubic-bezier(.45,1,.4,1),-webkit-transform .35s cubic-bezier(.45,1,.4,1);
	}
	.weui-switch, .weui-switch-cp__box {
	    position: relative;
	    width: 60px;
	    height: 40px;
	    border: 1px solid #dfdfdf;
	    outline: 0;
	    border-radius: 16px;
	    box-sizing: border-box;
	    background-color: #dfdfdf;
	    -webkit-transition: background-color .1s,border .1s;
	    transition: background-color .1s,border .1s;
	}

	.weui-switch-cp__box:after, .weui-switch:after {
	    content: " ";
	    position: absolute;
	    top: -1px;
	    left: -4px;
	    width: 40px;
	    height: 40px;
	    border-radius: 15px;
	    background-color: #fff;
	    box-shadow: 0 1px 3px rgba(0,0,0,.4);
	    -webkit-transition: -webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
	    transition: -webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
	    transition: transform .35s cubic-bezier(.4,.4,.25,1.35);
	    transition: transform .35s cubic-bezier(.4,.4,.25,1.35),-webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{text11}}</span>
		</div>
		<div class="info">
			<div class="info_list">
				<div class="my_info">
					<div class="item">
						<span class="lable">帮助中心</span><span class="tab"><a :href="help"><img src="__STATIC__/images/arrowrigth.png" alt=""></a></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">意见反馈</span><span class="tab"><a :href="suggest"><img src="__STATIC__/images/arrowrigth.png" alt=""></a></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">用户协议</span><span class="tab"><a :href="agreement"><img src="__STATIC__/images/arrowrigth.png" alt=""></a></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">关于我们</span><span class="tab"><a :href="about"><img src="__STATIC__/images/arrowrigth.png" alt=""></a></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">隐藏信息</span><span v-if="hide_status" class="tab"><input class="weui-switch switch" type="checkbox" checked="checked"></span>
						<span v-if="!hide_status" class="tab"><input class="weui-switch switch" type="checkbox"></span>

					</div>
				</div>

				
			</div>
		</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text11:'设置',
			    help:"{:url('page')}",
			    suggest:"{:url('page')}",
			    about:"{:url('page')}",
			    agreement:"{:url('page')}",
			    hide_status:0,
			},
		    methods:{
		        getMemberList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/user_info',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {page: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				t.hide_status = data.data.member_data.hide_status;
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getMemberList();
	            //console.log();
	        }

		})

		$('.switch').change(function(event) {
			console.log(this.checked);
			if(this.checked == true){
			    	var hide_status = 1;
		    }else{
		    	var hide_status = 0;
		    }
		    vm.hide_status = hide_status;
		    $.ajax({
        		url: host+'member/hide',
        		type: 'post',
        		dataType: 'json',
        		data: {'hide_status': hide_status},
        		success:function(data){
        			$.toast(data.msg,'text');
	        		return;
        		},
        		error:function(e){
        			console.log('error'+e);
        		}
	      	})	
				
		});
		// $(document).on('click','.weui-switch', function(e) {
		// 		console.log(this.checked);
		// 	    if(this.checked = true){
		// 	    	var hide_status = 1;
		// 	    }else{
		// 	    	var hide_status = 0;
		// 	    }
		// 	    // $.ajax({
	 //      //   		url: host+'member/hide',
	 //      //   		type: 'post',
	 //      //   		dataType: 'json',
	 //      //   		data: {'hide_status': hide_status},
	 //      //   		success:function(data){
	 //      //   			$.toast(data.msg,'text');
		//      //    		return;
	 //      //   		},
	 //      //   		error:function(e){
	 //      //   			console.log('error'+e);
	 //      //   		}
	 //      //   	})	
				
		// });
	});
</script>
{/block}